<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌单详细列表</title>

    <!-- 1. bootstrap.css/bootstrap.min.css -->
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css" rel="stylesheet">
    <link rel="stylesheet" href="playlistDetail.css">

</head>
<body>
<nav class="navbar navbar-inverse" role="navigation">
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <!-- 导航栏 -->
        <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">首页</a></li>
            <li><a href="/dev/view/topChart/rank.html">排行榜</a></li>
            <li><a href="/dev/view/playList/playlist.html">歌单</a></li>
        </ul>

        <!-- 登录按钮 -->
        <ul class="nav navbar-nav navbar-right" id="loginButton">
            <li><a href="#" data-toggle="modal" data-target="#myModal">登录</a></li>
            <!-- 初始隐藏头像 -->
            <li><img id="nav_img" src="/dev/img/1.png" style="display: none;"></li>
        </ul>

        <!-- 搜索框 -->
        <form class="navbar-form navbar-right" id="searchForm">
            <div class="form-group">
                <input type="text" class="form-control" id="searchInput" placeholder="搜索音乐">
            </div>
            <button type="submit" class="btn btn-default">搜索</button>
        </form>

    </div>
    </div>

    <!-- 模态框（Modal）-begin -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">用户登录入口

                    </h4>
                </div>
                <div class="modal-body">
                    <!-- 登录表单   -begin -->
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="email" class="col-sm-2 control-label">邮箱</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="email" placeholder="请输入邮箱">
                                <span class="form-control-feedback glyphicon glyphicon-envelope"></span>
                                <span class="text-danger" id="email_span" style="display: none">sorry,email is not found!</span>
                            </div>
                            <div class="col-md-2" style="margin-left: -20px;">
                                <button type="button" class="btn btn-success" onclick="send_code()">发送验证码</button>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="code" class="col-sm-2 control-label">验证码</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="code" placeholder="请输入验证码">
                                <span class="form-control-feedback glyphicon glyphicon-phone"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox">请记住我
                                    </label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="button" class="btn btn-default" onclick="login()">登录</button>
                            </div>
                        </div>
                    </form>
                    <!-- 登录表单 -end -->
                </div>
                <div class="modal-footer">
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <!-- 模态框（Modal）- end -->
</nav>

<!-- 自定义容器 -->
<div class="custom-container">
    <div class="container mt-4">
        <!-- 歌单头部信息 -->
        <div class="playlist-header">
            <img src="https://placehold.co/200x200" alt="歌单封面" class="playlist-cover">
            <div class="playlist-info">
                <div class="playlist-title">我的歌单</div>
                <!-- 创建者信息和按钮 -->
                <div class="playlist-creator mb-3">创建者：用户123</div>
                <div class="button-group mb-4">
                    <!-- 播放按钮 -->
                    <button type="button" class="btn btn-primary">
                        <i class="bi bi-play-fill"></i> 播放
                    </button>
                    <!-- 收藏按钮 -->
                    <button type="button" class="btn btn-outline-secondary">
                        <i class="bi bi-heart"></i> 收藏
                    </button>
                    <!-- 分享按钮 -->
                    <button type="button" class="btn btn-outline-secondary">
                        <i class="bi bi-share"></i> 分享
                    </button>
                    <!-- 下载按钮 -->
                    <button type="button" class="btn btn-outline-secondary">
                        <i class="bi bi-download"></i> 下载
                    </button>
                    <!-- 评论按钮 -->
                    <button type="button" class="btn btn-outline-secondary">
                        <i class="bi bi-chat-left-text"></i> 评论
                    </button>
                </div>
                <div class="playlist-description">
                    这是一个示例歌单描述。这里可以写一些关于歌单的介绍或者推荐理由。
                </div>
                <div class="playlist-stats">
                    <span>播放量：100万</span> |
                    <span>收藏数：10万</span> |
                    <span>分享数：5万</span>
                </div>
            </div>
        </div>

        <!-- 歌曲列表 -->
        <div class="song-list mt-4">
            <h4 class="mb-3">歌曲列表</h4>
            <table class="table table-bordered">
                <thead class="table-dark">
                <tr>
                    <th scope="col">歌曲标题</th>
                    <th scope="col">时长</th>
                    <th scope="col">歌手</th>
                    <th scope="col">专辑</th>
                </tr>
                </thead>
                <tbody id="song-list-body">
                <!-- 动态插入歌曲行 -->
                </tbody>
            </table>
        </div>

    </div>
</div>

<!-- jquery.min.js文件 - jquery本身是js的框架. bootstrap依赖于jquery框架 -->
<script src="/dev/plugins/jquery/jquery.min.js"></script>
<!-- bootstrap.js/bootstrap.min.js -->
<script src="/dev/plugins/bootstrap/js/bootstrap.js"></script>
<script>
    // 页面加载时检查是否登录
    window.onload = function () {
        const token = localStorage.getItem('token');
        const navImg = document.getElementById('nav_img');
        const sidebarAvatar = document.querySelector('.user-avatar');
        if (token) {
            // 用户已登录，隐藏登录按钮，显示个人信息和头像
            document.getElementById('loginButton').style.display = 'none';
            document.getElementById('username').style.display = 'block';
            document.getElementById('userLevel').style.display = 'block';
            document.getElementById('userPoints').style.display = 'block';
            document.getElementById('pleaseLogin').style.display = 'none';
            navImg.style.display = 'block'; // 显示导航栏头像
            //sidebarAvatar.style.display = 'block'; // 显示侧边栏头像
        } else {
            // 用户未登录，显示登录按钮，隐藏个人信息和头像
            document.getElementById('loginButton').style.display = 'block';
            document.getElementById('username').style.display = 'none';
            document.getElementById('userLevel').style.display = 'none';
            document.getElementById('userPoints').style.display = 'none';
            document.getElementById('pleaseLogin').style.display = 'block';
            navImg.style.display = 'none'; // 隐藏导航栏头像
            //sidebarAvatar.style.display = 'none'; // 隐藏侧边栏头像
        }
    };

<!--获取后端传输的数据对内容继续修改-->
<script>
    // 页面加载完成后执行
    $(document).ready(function () {
        // 发送 AJAX 请求获取歌单数据
        $.ajax({
            url: '/dev/playlistDetails',
            method: 'GET', // 请求方法
            dataType: 'json', // 响应数据类型
            // 修改AJAX成功回调
            success: function (res) {
                console.log(res)
                // 更新歌单信息
                updatePlaylistInfo(res.data.playList);
                // 更新歌曲列表
                updateSongList(res.data.songs);
            },
            error: function (xhr, status, error) {
                // 请求失败时，处理错误
                console.error('AJAX请求失败:', status, error);
                alert('加载歌单信息失败，请稍后重试！');
            }
        });

        // 在updateSongList函数中添加点击事件
        function updateSongList(songs) {
            const tbody = $('#song-list-body');
            tbody.empty();

            songs.forEach(song => {
                const row = `
                <tr data-song-id="${song.songId}">
                    <td>${song.title}</td>
                    <td>${formatDuration(song.duration)}</td>
                    <td>${song.artist}</td>
                    <td>${song.album}</td>
                </tr>
            `;
                tbody.append(row);
            });

            // 绑定点击事件
            $('#song-list-body').on('click', 'tr', function() {
                const songId = $(this).data('song-id');
                window.location.href = `/dev/view/songDetail/player.html?songId=${songId}`;
            });
        }

        // 时长格式化函数
        function formatDuration(seconds) {
            const mins = Math.floor(seconds / 60);
            const secs = seconds % 60;
            return `${mins}:${secs.toString().padStart(2, '0')}`;
        }

        // 原代码可能存在字段名错误或不匹配
        function updatePlaylistInfo(playlistData) {
            // 修改歌单封面图片（假设原字段是 img_url 而非 imgRul）
            $(".playlist-cover").attr("src", "/dev/img/" + playlistData.imageUrl);
            // 修改其他字段（确保字段名与后端一致）
            $(".playlist-title").text(playlistData.title);
            $(".playlist-creator").text("创建者：" + playlistData.name); // 假设后端字段是 creator
            $(".playlist-description").text(playlistData.details);
            $(".playlist-stats").html(`
                <span>播放量：${playlistData.playCount}</span> |
                <span>收藏数：${playlistData.favoriteCount}</span> |
                <span>分享数：${playlistData.shareCount}</span>
            `);
        }
    });

</script>
</body>
</html>